<template>
    <el-row>
        <el-col class="white-block" :span="24">
            <h3>按钮</h3>
            <el-button type="primary">提交</el-button>
            <el-button type="minor">提交</el-button>
            <el-button type="primary" disabled>提交</el-button>
            <el-button>提交</el-button>
            <el-button class="primary">提交</el-button>
            <el-button class="minor">提交</el-button>
            <h3>按钮尺寸</h3>
            <div class="mt20">
                <el-button type="primary" size="large">large</el-button>
                <el-button type="primary">default</el-button>
                <el-button type="primary" size="medium">medium</el-button>
                <el-button type="primary" size="small">small</el-button>
                <el-button type="primary" size="mini">mini</el-button>
            </div>
            <h3>链接</h3>
            <el-link>普通链接</el-link>
            <br>
            <el-link type="primary">蓝色普通链接</el-link>
            <br>
            <el-link type="primary" :underline="false">无下划线蓝色普通链接</el-link>
            <h3>输入框</h3>
            <el-input v-model="input" placeholder="default Input"></el-input>
            <el-input v-model="input" placeholder="medium Input" size="medium" class="mt20"></el-input>
            <el-input v-model="input" placeholder="small Input" size="small" class="mt20"></el-input>
            <el-input v-model="input" placeholder="mini Input" size="mini" class="mt20"></el-input>
            <h3>文本域</h3>
            <el-input v-model="input" type="textarea" placeholder="普通文本域"></el-input>
            <el-input v-model="input" type="textarea" placeholder="初始设定大小的文本域" class="mt20"
                      :autosize="{ minRows: 4, maxRows: 4}"></el-input>
            <h3>下拉框</h3>
            <el-select v-model="value" placeholder="请选择">
                <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                </el-option>
            </el-select>
            <el-select v-model="value" placeholder="请选择" size="medium">
                <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                </el-option>
            </el-select>
            <el-select v-model="value" placeholder="请选择" size="small">
                <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                </el-option>
            </el-select>
            <el-select v-model="value" placeholder="请选择" size="mini">
                <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                </el-option>
            </el-select>
            <h3>步骤条</h3>
            <el-steps :active="1" :align-center="true">
                <el-step icon="el-icon-edit" title="基本信息">
                    <div slot="icon" class="circle">
                        <i class="iconfont icon-plus"></i>
                    </div>
                    <div slot="title" class="title">
                        基本信息
                    </div>
                </el-step>
                <el-step icon="el-icon-edit" title="详细信息">
                    <div slot="icon" class="circle">
                        <i class="iconfont icon-plus"></i>
                    </div>
                    <div slot="title" class="title">
                        详细信息
                    </div>
                </el-step>
                <el-step icon="el-icon-edit" title="详细信息">
                    <div slot="icon" class="circle">
                        <i class="iconfont icon-plus"></i>
                    </div>
                    <div slot="title" class="title">
                        详细信息
                    </div>
                </el-step>
            </el-steps>
        </el-col>
    </el-row>

</template>

<script>
    export default {
        name: '',
        data() {
            return {
                input: '',
                options: [{
                    value: '选项1',
                    label: '黄金糕'
                }, {
                    value: '选项2',
                    label: '双皮奶'
                }, {
                    value: '选项3',
                    label: '蚵仔煎'
                }, {
                    value: '选项4',
                    label: '龙须面'
                }, {
                    value: '选项5',
                    label: '北京烤鸭'
                }],
                value: ''
            }
        },
        mounted() {

        },
        methods: {},
        components: {}

    }
</script>

<style scoped lang="less">
    h3 {
        margin: 20px 0;
    }

    .el-step__head {
        .circle {
            width: 80px;
            height: 80px;
            border: 2px solid #EFEFEF;
            text-align: center;
            line-height: 76px;
            border-radius: 50%;
            color: #EFEFEF;

            i {
                font-size: 30px;
            }
        }

        &.is-finish {
            .circle {
                color: #4995f4;
                border-color: #4995f4;
            }
        }

        &.is-process {
            .circle {
                color: #fff;
                border-color: #4995f4;
                background-color: #4995f4;
            }
        }

    }

    .el-step__title {
        .title {
            margin-top: 30px;
            color: #999;
        }

        &.is-finish, &.is-process {
            .title {
                color: #333;
            }
        }
    }
</style>
